﻿<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>简单漂亮的CSS3图片悬停遮罩效果-凌晨两点半</title>
</head>
<body>
<style>
	* { margin: 0; padding: 0; }
body { font-family: "Microsoft yahei", Arial; background: #eee; }
.box { width: 518px; height: 500px; margin: 50px auto; }
.box ul li { float: left; width: 237px; height: 158px; background: indigo; border: solid 1px gold; margin: 10px; list-style: none; position: relative; overflow: hidden; }
.box ul li .cover a { width: 30px; height: 30px; background: #ffffff; display: block; border-radius: 50%; line-height: 30px; margin: 30px auto; }
.box ul li .cover a i { color: red; }
.box ul li .cover { width: 237px; height: 158px; background: rgba(255, 39, 42, 0.7); position: absolute; left: 0; top: 0; text-align: center; color: #ffffff; transform-origin: right bottom; -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; transform: rotate(90deg); -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); transition: all 0.35s; -webkit-transition: all 0.35s; -moz-transition: all 0.35s; }
.box ul li .cover p { margin-top: 10px; font-size: 14px; }
.box ul li:hover .cover { transform: rotate(0deg); -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); }
</style>
<!-- 代码部分begin -->
<div class="box">
<ul>
	<li>
		<img src="liuyan201901.JPG" alt="">
		<div class="cover">
			<a href=""><i class="fa fa-plus"></i></a>
			<h4>柳岩</h4>
			<p>中国女明星</p>
		</div>
	</li>
	<li>
		<img src="liuyan201901.JPG" alt="">
		<div class="cover">
			<a href=""><i class="fa fa-plus"></i></a>
			<h4>柳岩</h4>
			<p>中国女明星</p>
		</div>
	</li>
</ul>
</div>
<!-- 代码部分end -->
</body>
</html>
